
<!-- 电催外访-->
<style lang="less">
@import '../../../styles/common.less';
</style>
<template>
  <Row>
    <Form :label-width="150" inline>
      <div class='main_item'>
        <div @click="dataShow('foreignVisitsDiv')" id="moxx" class="main_item_title">
          <span style="font-weight:bold;" icon="md-arrow-dropdown">催收外访</span>
          <span style="float:right">
            <Icon type="md-arrow-dropdown" id="foreignVisitsDiv_icon"></Icon>
          </span>
        </div>
        <div id="foreignVisitsDiv" class="main_item_content_block">
          <div style="margin:3px 10px 3px 10px;">
            <Table border :columns="visitForeignColumns" :data="visitForeignData" style="width: 100%;"></Table>
            <Button type="primary" icon="md-add" style="width:60px;" @click="addVisitForeignColumns" v-if="collectTaskParams.overdueType !='1'" ></Button>
          </div>
        </div>
      </div>
    </Form>
    <Form action="" method="get" name="exportFile" id="exportFile" enctype="multipart/form-data">
      <input id="id" name="id" type="hidden" />
    </Form>
  </Row>
</template>

<script>
export default {
  name: 'collect-base-info',
  data () {
    return {
      // uploadUrl: this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/uploadCollectVisitInfo',
      index: '',
      actionInfo: {
        actionCode: '',
        actionName: '',
        actionStatusCode: '',
        actionStatusName: '',
        remarks: '',
        promiseAmount: '',
        promiseDate: '',
        contactPerson: '',
        relationCode: '',
        relationType: '',
        contactType: '',
        meetDate: '',
        loanId: '',
        custCardNo: '',
        overdueCode: ''
      },
      actionCodeList: [],
      actionResultList: [],
      electricalResultList: [

      ],
      relationManList: [],

      electricalChkEmptyRowData: {
        pohneType: '',
        id: '',
        contactorName: '',
        phoneNbr: '',
        resultCde: '',
        resultName: '',
        memo: '',
        updatedBy: '',
        updatedDate: '',
        startTime: ''
      },
      electricalInputData: [],
      tempChkData: [],
      visitForeignColumns: [
        {
          title: '外出催收日期',
          key: 'visitDate',
          align: 'center',
          render: function (h, params) {
            const vm = this
            if (params.row.id !== '' && params.row.id !== null) {
              return h('div', [
                h('span', vm.$util.loanModularFormatTime(params.row.visitDate))
              ])
            } else {
              return h('DatePicker', {
                style: {
                  'margin-top': '2px'
                },
                props: {
                  type: 'date'
                },
                on: {
                  'on-change' (e) {
                    vm.initTmpVisitForeignData(params)
                    vm.$set(vm.tmpVisitForeignData[params.index], 'visitDate', e)
                  }
                }
              })
            }
          }.bind(this)
        },
        {
          title: '催收人姓名',
          key: 'collectorName',
          align: 'center',
          render: function (h, params) {
            const vm = this
            return h('Input', {
              style: {
                'margin-top': '2px'
              },
              props: {
                type: 'text',
                value: params.row.collectorName,
                disabled: (params.row.id !== '' && params.row.id !== null) === true
              },
              on: {
                'on-change' (e) {
                  vm.initTmpVisitForeignData(params)
                  vm.$set(vm.tmpVisitForeignData[params.index], 'collectorName', e.target.value)
                }
              }
            })
          }.bind(this)
        },
        {
          title: '催收人电话',
          key: 'collectorPhone',
          align: 'center',
          render: function (h, params) {
            const vm = this
            return h('Input', {
              style: {
                'margin-top': '2px'
              },
              props: {
                type: 'text',
                value: params.row.collectorPhone,
                disabled: (params.row.id !== '' && params.row.id !== null) === true
              },
              on: {
                'on-change' (e) {
                  vm.initTmpVisitForeignData(params)
                  vm.$set(vm.tmpVisitForeignData[params.index], 'collectorPhone', e.target.value)
                }
              }
            })
          }.bind(this)
        },
        {
          title: '催收地址',
          key: 'address',
          align: 'center',
          render: function (h, params) {
            const vm = this
            return h('Input', {
              style: {
                'margin-top': '2px'
              },
              props: {
                type: 'text',
                value: params.row.address,
                disabled: (params.row.id !== '' && params.row.id !== null) === true
              },
              on: {
                'on-change' (e) {
                  vm.initTmpVisitForeignData(params)
                  vm.$set(vm.tmpVisitForeignData[params.index], 'address', e.target.value)
                }
              }
            })
          }.bind(this)
        },
        {
          title: '备注',
          key: 'memo',
          align: 'center',
          render: function (h, params) {
            const vm = this
            return h('Input', {
              style: {
                'margin-top': '2px'
              },
              props: {
                type: 'text',
                value: params.row.memo,
                disabled: (params.row.id !== '' && params.row.id !== null) === true
              },
              on: {
                'on-change' (e) {
                  vm.initTmpVisitForeignData(params)
                  vm.$set(vm.tmpVisitForeignData[params.index], 'memo', e.target.value)
                }
              }
            })
          }.bind(this)
        },
        {
          title: '操作人',
          key: 'oprator',
          align: 'center'
        },
        {
          title: '上传日期',
          key: 'updatedDate',
          align: 'center',
          render: function (h, params) {
            if (params.row.id !== '' && params.row.id !== null) {
              const vm = this
              return h('div', [
                h('span', vm.$util.loanModularFormatTime(params.row.updatedDate))
              ])
            }
          }.bind(this)
        },
        {
          align: 'center',
          title: '上传',
          key: 'action',
          width: 150,
          render: function (h, param) {
            var vm = this
            return h('div', {}, [
              h('Upload', {
                props: {
                  action: vm.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/uploadCollectVisitInfo?id=' + param.row.id,

                  headers: {
                    'l-token': sessionStorage['l-token']
                  },
                  // 上传失败回调
                  'on-error': function (err) {
                    vm.$Message.error('上传失败：' + err.data)
                  },

                  // 上传成功回调
                  'on-success': function (response) {
                    // 执行上传成功后的逻辑
                    if (response.code === 'success') {
                      vm.$Message.success('上传成功')
                      vm.uploadSuccess(response)
                    }
                  }
                  // 'format': ['xml'],
                  // 'on-format-error': function () {
                  //   vm.$Message.warning('请上传PDF格式的文档！')
                  // }
                }
              },
              [h('Button', {
                props: {
                  icon: 'ios-cloud-upload'
                }
              }, '上传')]
              )
            ])
          }.bind(this)
        },
        // {
        //   align: 'center',
        //   render: function (h, params) {
        //     var vm = this
        //     return h('Upload', {
        //       style: {
        //         'color': '#20a0ff',
        //         'cursor': 'pointer'
        //       },
        //       props: {
        //         ref: 'upload',
        //         action: vm.$appContext.marvels_core_debtor + '/debtor/general/collectionManagement/service/uploadCollectVisitInfo/' + params.row.id,
        //         // action: vm.uploadUrl + '?id=' + params.row.id,
        //         // action: vm.$appContext.marvels_core_approve + 'approve/credit/report/service/reportUpload?loanId=' + params.row.id,
        //         name: 'file',
        //         'on-success': vm.uploadSuccess,
        //         'on-error': vm.uploadFail,
        //         'on-progress': vm.uploadLoading(params.index)
        //       }
        //     }, '上传')
        //   }.bind(this)
        // },
        {
          title: '下载',
          align: 'center',
          render: (h, params) => {
            if (params.row.id !== '' && params.row.id !== null && params.row.filePath !== '' && params.row.filePath !== null) {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    document.getElementById('exportFile').action = this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/downLoadVisitFile'
                    document.getElementById('id').value = params.row.id
                    document.getElementById('exportFile').submit()
                  }
                }
              }, '下载')
            } else if (params.row.id !== '' && params.row.id !== null && (params.row.filePath === '' || params.row.filePath === null)) {
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                }
              }, '无附件记录')
            }
          }
        },
        {
          align: 'center',
          render: function (h, params) {
            if (params.row.id === '' || params.row.id === null) {
              var vm = this
              return h('span', {
                style: {
                  'color': '#20a0ff',
                  'cursor': 'pointer'
                },
                on: {
                  click: () => {
                    var reqParams = vm.tmpVisitForeignData[params.index]
                    reqParams.overdueCaseId = this.collectTaskParams.overdueCaseId
                    vm.$ajax.post(vm.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/addOperationOutbound', reqParams).then(re => {
                      var data = re.data
                      var code = data.code
                      var message = data.message
                      if (code === 'success') {
                        vm.$Message.warning('添加成功！')
                        vm.initData()
                      // vm.commonModularInfo()
                      } else {
                        vm.$Message.warning(message)
                      }
                    }).catch(er => {

                    })
                  }
                }
              }, '提交')
            }
          }.bind(this)

        }
      ],
      filePath: '',
      visitForeignData: [],
      tmpVisitForeignData: [],
      visitForeignChkEmptyRowData: {
        id: '',
        visitDate: '',
        collectorName: '',
        collectorPhone: '',
        address: '',
        memo: '',
        oprator: '',
        updatedDate: '',
        loanModularFormatTime: ''
      },
      comptParams: {
        loanId: '',
        overdueCode: '',
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initData()
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.comptParams.pageNum = pageNum
      vm.initData()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.comptParams.pageSize = pageLength
      vm.initData()
    },
    initData () {
      var vm = this
      vm.comptParams.loanId = this.collectTaskParams.loanId
      vm.comptParams.overdueCode = this.collectTaskParams.overdueCode
      vm.comptParams.overdueCaseId = this.collectTaskParams.overdueCaseId
      this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/initialOperationOutbound', vm.comptParams).then(re => {
        var data = re.data.data
        vm.visitForeignData = data.selectVisitList
      }).catch(er => {

      })
    },

    initTempChkDataObject (params) {
      if (!this.tempChkData[params.index]) {
        this.tempChkData[params.index] = {}
      }
    },
    initTmpVisitForeignData (params) {
      if (!this.tmpVisitForeignData[params.index]) {
        this.tmpVisitForeignData[params.index] = {}
      }
    },
    // 点击tab事件
    addElectricalInputColumns () {
      var vm = this
      vm.electricalInputData.push(this.$util.cloneObject(this.electricalChkEmptyRowData))
    },
    addVisitForeignColumns () {
      var vm = this
      vm.visitForeignData.push(this.$util.cloneObject(this.visitForeignChkEmptyRowData))
    },
    dataShow: function (tagId) {
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    uploadSuccess (response) {
      var vm = this
      var code = response.code
      var message = response.message
      if (code !== 'success') {
        this.$Message.warning(message)
      }
      var data = response
      var params = {}
      params.filePath = data.data.filePath
      params.fileName = data.data.fileName
      params.id = data.data.id
      params.overdueCaseId = vm.collectTaskParams.overdueCaseId
      // vm.visitForeignData[vm.index].filePath = response.data.filePath
      // vm.visitForeignData[vm.index].fileName = response.data.fileName
      // vm.visitForeignData[vm.index].overdueCode = vm.collectTaskParams.overdueCode
      // vm.visitForeignData[vm.index].id = response.data.id

      // vm.tmpVisitForeignData[this.index].filePath = response.data.filePath
      // vm.tmpVisitForeignData[this.index].fileName = response.data.fileName
      // vm.tmpVisitForeignData[this.index].overdueCode = vm.collectTaskParams.overdueCode
      // var reqParams = vm.visitForeignData[vm.index]
      // reqParams.overdueCaseId = vm.collectTaskParams.overdueCaseId
      if (data.data.id !== null) { // 记录已经保存的情况下的上传
        this.$ajax.post(this.$appContext.marvels_core_debtor + 'debtor/general/collectionManagement/service/addOperationOutbound', params).then(re => {
          var data = re.data
          var code = data.code
          var message = data.message

          if (code === 'success') {
            vm.initData()
          } else {
            this.$Message.warning(message)
          }
        }).catch(er => {
        })
      }
    },
    uploadFail (response) {

    },
    uploadLoading (index) {
      this.index = index
    }
  },
  props: {
    collectTaskParams: Object
  }

}
</script>
